<!-- 销量排行(柱状图) -->
<template>
	<div id="com-container">
		<div class="com-chart" ref="rank_ref">

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				chartInstance: null,
				allData: null, //服务器返回的数据
				startValue: 0, //区域缩放起点开始时显示柱状图个数
				endValue: 9, //最后最多显示的
				timerId: null //定时器

			}

		},
		mounted() {
			this.initChart()
			this.getData()
			//屏幕监听事件
			window.addEventListener('resize', this.screenAdapter)
			//在页面加载完成的时候 主动进行屏幕的适配
			this.screenAdapter()

		},
		destroyed() {
			window.removeEventListener('resize', this.screenAdapter)
			clearInterval(this.timerId)
		},
		methods: {
			//初始化echarInstance对象
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.rank_ref, 'chalk') //第二个参数主题的使用
				//对图表初始化配置的控制
				const initOption = {
					title: {
						text: '▎地区销售排行',
						left: 20,
						top: 20
					},
					grid: { //设置坐标轴大小
						top: '20%',
						left: '7%',
						right: '5%',
						bottom: '5%',
						containLabel: true //包含文字
					},
					tooltip: {
						show: true //鼠标移动到相应省份显示文字
					},
					xAxis: {
						type: 'category'
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						type: 'bar'
					}]
				}
				//可以多次设置setOption  它是相互整合的过程  不会覆盖之前的设置
				this.chartInstance.setOption(initOption)
				//鼠标事件 鼠标放在柱状图上时取消定时器
				this.chartInstance.on('mouseover', () => {
					clearInterval(this.timerId)
				})
				//鼠标移开时启动定时器
				this.chartInstance.on('mouseout', () => {
					this.startInterval()
				})

			},
			// 获取服务器的数据
			async getData() {
				// http://127.0.0.1:8000/api/seller
				const {
					data: ret
				} = await this.$http.get('rank')
				this.allData = ret
				//对数据进行排序
				this.allData.sort((a, b) => {
					return b.value - a.value //从小到大进行排序
				})
				this.updateChart()
				this.startInterval()
			},
			//更新图表
			updateChart() {
				const colorArr = [ //柱状图颜色渐变值
					['#0BA82C', '#4FF778'],
					['#2E72BF', '#23E5E5'],
					['#5052EE', '#AB6EE5']
				]
				//所以省份形成的数组
				const provinceArr = this.allData.map(item => {
					return item.name
				})
				//所有省份的销售额
				const valueArr = this.allData.map(item => {
					return item.value
				})
				const dataOption = { //因为前面都配置过 这里只对数据行配置 
					xAxis: {
						data: provinceArr
					},
					dataZoom: {
						show: false, //关闭缩放条
						startValue: this.startValue,
						endValue: this.endValue
					},
					series: [{
						data: valueArr,
						itemStyle: { //控制柱状图的颜色
							color: arg => {
								let tagetColorArr = null
								if (arg.value > 300) {
									tagetColorArr = colorArr[0]
								} else if (arg.value > 200) {
									tagetColorArr = colorArr[1]
								} else {
									tagetColorArr = colorArr[2]
								}
								return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: tagetColorArr[0]
									},
									{
										offset: 1,
										color: tagetColorArr[1]
									}
								])
							}
						}
					}],

				}
				this.chartInstance.setOption(dataOption)

			},
			screenAdapter() { //屏幕适配  当浏览器发生变化时 图表也随之改变
				//获取标题大小
				const titleFontSize = this.$refs.rank_ref.offsetWidth / 100 * 3.6
				const adapterOption = { //屏幕适配相关的一些配置
					title: {
						textStyle: {
							fontSize: titleFontSize
						}
					},
					series: [{
						barWidth: titleFontSize,
						itemStyle: { //设置柱状图的圆角效果
							barBorderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0]
						}
					}]
				}
				this.chartInstance.setOption(adapterOption)

				//手动调用图表对象的resize  才能产生效果
				this.chartInstance.resize()
			},
			startInterval() { //设置定时器
				if (this.timerId) {
					clearInterval(this.timerId)
				}
				this.timerId = setInterval(() => {
					this.startValue++
					this.endValue++
					if (this.startValue > this.allData.length - 1) {
						this.startValue = 0
						this.endValue = 9
					}
					this.updateChart()
				}, 2000)
			}

		}
	}
</script>

<style scoped="scoped">
</style>
